<template>
  <div>
    <el-container>
      <el-aside width="50%">
        <el-container align="center">
          <el-header height="150px" class="head">
            <p class="title">不同类型车辆的租赁情况</p>
            <el-button style="width: 150px; height: 30px; margin-top: 15px; background-color: cadetblue; color: white;"
              @click="fetchRentalCount">刷新</el-button>
          </el-header>
          <el-main id="main">
            <el-table :data="rentalCountData" height="240" align="center">
              <el-table-column prop="modelName" label="车型名称" width="150" align="center" />
              <el-table-column prop="rentedCount" label="已租数量" width="150" align="center" />
            </el-table>
          </el-main>
        </el-container>
      </el-aside>
      <el-container width="50%">
        <el-header height="150px" class="head" align="center">
          <p class="title">按车型查询可租赁的车辆信息</p>
          <div class="input-group">
            <label class="inputlabel">
              <el-input style="width: 240px" v-model="modelName" placeholder="请输入车型名称"></el-input>
            </label>
            <el-button style="width: 150px; height: 30px; background-color: #4caf50; color: white;"
              @click="SearchCarsByModel">查询</el-button>
          </div>
        </el-header>
        <el-main id="main">
          <el-table :data="availableCarsData" height="240" align="center">
            <el-table-column prop="modelName" label="车型名称" width="150" align="center" />
            <el-table-column prop="carNumber" label="车号" width="150" align="center" />
            <el-table-column prop="carPrice" label="车价" width="150" align="center" />
          </el-table>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const rentalCountData = ref([]);
const availableCarsData = ref([]);
const modelName = ref('');

const fetchRentalCount = async () => {
  try {
    const response = await axios.get('http://localhost:8080/cars/rentalcount');
    if (response.data && response.data.code === 1) {
      rentalCountData.value = response.data.data || [];
      ElMessage({
        type: 'success',
        message: '数据刷新成功',
      });
    } else {
      ElMessage({
        type: 'error',
        message: '数据刷新失败，请稍后再试。',
      });
    }
  } catch (error) {
    ElMessage({
      type: 'error',
      message: '服务器请求失败，请检查网络连接或稍后再试。',
    });
  }
};

const SearchCarsByModel = async () => {
  if (!modelName.value) {
    ElMessage.error('请输入车型名称');
    fetchAllAvailableCars();
    return;
  }
  try {
    const response = await axios.get(`http://localhost:8080/cars/available/byModel?modelName=${modelName.value}`);
    if (response.data && response.data.code === 1) {
      availableCarsData.value = response.data.data || [];
      ElMessage({
        type: 'success',
        message: '查询成功',
      });
    } else {
      ElMessage({
        type: 'error',
        message: '查询失败，请稍后再试。',
      });
    }
  } catch (error) {
    ElMessage({
      type: 'error',
      message: '服务器请求失败，请检查网络连接或稍后再试。',
    });
  }
};

const fetchAllAvailableCars = async () => {
  try {
    const response = await axios.get('http://localhost:8080/cars/available');
    if (response.data && response.data.code === 1) {
      availableCarsData.value = response.data.data || [];
    } else {
      ElMessage({
        type: 'error',
        message: '查询失败，请稍后再试。',
      });
    }
  } catch (error) {
    ElMessage({
      type: 'error',
      message: '服务器请求失败，请检查网络连接或稍后再试。',
    });
  }
};

onMounted(() => {
  fetchRentalCount();
  fetchAllAvailableCars();
});
</script>

<style scoped>
.left-panel,
.right-panel {
  padding: 0 20px;
}

.title {
  height: 30px;
  margin-bottom: 15px;
  padding-top: 15px;
  font-size: 20px;
  font-weight: 100;
}

.head {
  margin-left: 30px;
}

.input-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* 调整输入框和按钮之间的间距 */
}

.main {
  position: relative;
  top: 20px;
}

.inputlabel {
  display: flex;
  align-items: center;
  border: 0px solid black;
  margin-right: 20px;
}
</style>
